<template>
	<view class="padb20">
		<stop isBack>
			<view slot="content">巡检计划</view>
		</stop>
		<view class="mart3">
			<stab @change="(index)=>{curTab=index}" :names="['计划信息','绑定设备','部门人员','点检项目']"></stab>
		</view>
		<view class="padlr3" v-show="curTab == 0">
			<view class="lh2 bcf pad2 bdtso mart3">
				<view class="list-style-2 flrc">
					<view class="flex1">巡检计划信息</view>
				</view>
				<view class="lh2 bcf pad2 mart3">
					<sentity label="点检类型" model="MachineCheckPlanCategory" placeholder="请选择" v-model="en.category"></sentity>
				</view>
				<view class="lh2 bcf pad2 mart3">
					<sentity label="计划类型" model="MachinePlanType" placeholder="请选择" v-model="en.type"></sentity>
				</view>
				<view class="lh2 bcf pad2 mart3 bdtda">
					<stext label="间隔天数"placeholder="[选填]自定义周期时填写" v-model="en.day"></stext>
				</view>
				<view class="lh2 bcf pad2 bdtda">
					<sdatetime label="首次开始" model="Department" placeholder="请选择" v-model="en.startAt"></sdatetime>
				</view>
				<view class="lh2 bcf pad2 bdtda">
					<sswitch label="是否运行" v-model="en.isRun"></sswitch>
				</view>
				<view class="lh2 bcf pad2 bdtda">
					<stextarea label="计划描述" placeholder="简单说明计划内容" v-model="en.info"></stextarea>
				</view>
			</view>
		</view>
		<view class="padlr3" v-show="curTab == 1">
			<view class="lh2 bcf pad2 bdtso mart3">
				<view class="list-style-2 flrc">
					<view class="flex1">选择关联的设备</view>
				</view>
				<view class="martb2 flrc lh2 padt5" v-show="showSelectedMachine">
					<view class="wh30-30 flcc bdso round3 marr10 pos-r" @tap="scanMachine">
						<view class="cuIcon cuIcon-scan fs24 mart5"></view>
						<view class="mart2">扫码选择</view>
						<ripple></ripple>
					</view>
					<view class="wh30-30 flcc bdso round3 pos-r" @tap="showSelectMachine">
						<view class="cuIcon cuIcon-list fs24 mart5"></view>
						<view class="mart2">列表选择</view>
						<ripple></ripple>
					</view>
				</view>
				<!-- 显示选择的设备 -->
				<view class="pad3 bdso bcf mart3" v-show="isbool(en.machines)">
					<view class="pad1 mart3 pos-r ofh bc13 round3" @tap="mySlide(index)" v-for="machine,index in en.machines" :key="machine" >
						<machine-item class="w100" :iri.sync="machine"></machine-item>
						<ripple></ripple>
						<sslide ref="mySlideBox">
							<view class="flex1 flcc bg-gradual-orange">
								<view @tap="deleteMachine(index)" class="padlr8 w100 cf pos-r">删除 <ripple></ripple> </view>
							</view>
						</sslide>
					</view>
					
				</view>
			</view>
		</view>
		<view class="padlr3" v-show="curTab == 2">
			<view class="lh2 bcf pad2 bdtso mart3">
				<view class="list-style-2 flrc">
					<view class="flex1">相关人员及部门</view>
				</view>
				<view class="lh2 bcf pad2 bdtda">
					<stree label="责任部门" model="Department" placeholder="请选择" v-model="en.department"></stree>
				</view>
				<view class="lh2 bcf pad2 bdtda">
					<suser label="负责人"  v-model="en.manageBy" placeholder="请选择"></suser>
				</view>
			</view>
		</view>
		<view class="padlr3" v-show="curTab == 3">
			<view class="lh2 bcf pad2 bdtso mart3">
				<view class="list-style-2 flrc">
					<view class="flex1">根据模板选择</view>
					<view class="cu-btn line-green sm" @tap="useTemplate">
						使用模板项目
						<ripple></ripple>
					</view>
				</view>
				<view class="lh2 bcf pad2 mart3">
					<sentity label="点检项模板" model="MachineCheckPointTemplate" placeholder="请选择" v-model="en.checkTemplate"></sentity>
				</view>
			</view>
			<view class="lh2 bcf pad2 bdtso mart3">
				<view class="list-style-2 flrc">
					<view class="flex1">点检项</view>
					<!-- <view class="cu-btn line-green sm">
						使用模板项目
						<ripple></ripple>
					</view> -->
				</view>
				<view class="lh2 bcf pad2 mart3">
					<view class="flrc pad1 bdbda" v-for="item in en.checkPoints" :key="item">
						<view class="flex1"><point :value="item"></point></view>
						<view class="cu-btn sm round c12" @tap="deletePoint(item)">
							<view class="fa fa-close"></view>
						</view>
					</view>
					<view class="mar3 pad3 tac bdda " v-show="en.checkPoints.length == 0">
						未选择任何项目
					</view>
				</view>
			</view>
			<view class="lh2 bcf pad2 bdtso mart3">
				<view class="list-style-2 flrc">
					<view class="flex1">注意</view>
				</view>
				<view class="text-orange pad3">
					当没有选择任何项目时，使用设备自身设置的默认点检项目
				</view>
			</view>
		</view>
		
		<!-- <loading :loading="myIsLoading"></loading> -->
		<machine-selector :show="showSelectListMachine" @onSelect="selectMachine" multi ></machine-selector>
		
		<view class="lh2 bcf pad2 bdtso pos-f l0 r0 b0">
			<view class="tac pad2 line-green round cu-btn lg w100 " @tap="submit">
				<view>提交</view>
				<ripple></ripple>
			</view>
		</view>
	</view>
</template>

<script>
	import machineItem from '../../templete/machine/machine_item.vue'
	import machineSelector from '../../templete/machine/machine_selector.vue'
	import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp.js";
	import point from '../../templete/machine/machine_check_point_item.vue'
	export default {
		// mixins:[MescrollCompMixin],
		components:{machineItem,machineSelector,point},
		data() {
			return {
				curTab:0,
				id:"",
				en:{
					category:'',
					type:'',
					day:"0",
					startAt:'',
					info:'',
					department:'',
					manageBy:'',
					machines:[],
					checkTemplate:'',
					checkPoints:[]
				},
				showSelectListMachine:true,
				showSelectedMachine:true,
				selectedMachine:{
					id:'',
					code:'',
					iri:''
				},
				sslide:[]
			}
		},
		methods: {
			showSelectMachine(){
				this.showSelectListMachine = Math.random()
			},
			selectMachine(val){
				if(!this.isnull(val)){
					val.map(data=>{
						this.addOne(data)
					})
				}else{
					this.$com.showToast('该设备已存在')
				}
			},
			addOne(val){
				if(!this.$com.isInArray(val,this.en.machines)){
					this.en.machines.push(val)
				}else{
					this.$com.showToast('该设备已存在')
				}
			},
			scanMachine(){
				this.$dev.scan(info=>{
					this.selectedMachine.code = info
				},(err)=>{
				})
			},
			deleteMachine(index){
				this.en.machines.splice(index,1);
			},
			submit(){
				this.log(this.en)
				//检查数据
				// id:'',
				// type:'',
				// day:"0",
				// startAt:'',
				// info:'',
				// department:'',
				// manageBy:'',
				// machines:[]
				if(this.isnull(this.en.machines)){this.$com.showToast('选择设备');return;}
				if(this.isnull(this.en.type)){this.$com.showToast('请选择类型');return;}
				if(this.isnull(this.en.startAt)){this.$com.showToast('请选开始时间');return;}
				if(this.isnull(this.en.info)){this.$com.showToast('请填写计划描述');return;}
				if(this.isnull(this.en.department)){this.$com.showToast('选择相关部门');return;}
				if(this.isnull(this.en.manageBy)){this.$com.showToast('选择相关人员');return;}
				this.$api.put("/api/machinePlanChecks",this.en,(res)=>{
					this.log(res)
					if(res.s == 1){
						this.goback()
					}
				})
			},
			getListFromTemplate(){
				if(this.isnull(this.en.checkTemplate)){this.$com.showToast('请选择模板');return;}
				this.$api.getRes(this.en.checkTemplate,res=>{
					this.log(res.points)
					this.en.checkPoints = res.points
				})
				
			},
			useTemplate(){
				this.getListFromTemplate()
			},
			deletePoint(point){
				this.en.checkPoints = this.$com.arrayDelValue(this.en.checkPoints,point)
			}
		},
		onLoad(option) {
			this.id = option.id
			this.en.id = option.id
			if(this.isbool(this.id)){
				this.$api.get("/api/machinePlanChecks/" + this.id, {},res=>{
					this.log(res)
					this.clearLoading()
					this.en = res.d
				})
			}
		},
		watch:{
			'en.checkTemplate'(value){
				this.log("我的checkTemplate是："+value)
				
			}

		}
	}
</script>

<style>

</style>
